<template>
  <view class="wrap">
    <view class="content"><view class="title">欢迎登陆白谷团购平台</view></view>
    <view class="buttom">
      <view class="loginType">
        <!-- 对于按钮需要进行禁用判断，以防止多次点击 -->
        <button @click="getUserMsg" class="loginBtn" :disabled="isLogin">
          <view class="wechat item">
            <view class="icon"
              ><u-icon
                size="200"
                name="weixin-fill"
                color="rgb(83,194,64)"
              ></u-icon
            ></view>
            微信登陆
          </view>
        </button>
      </view>
      <view class="hint">
        登录代表同意
        <text class="link">硅谷团购平台用户协议、隐私政策，</text>
        并授权使用您的硅谷团购平台账号信息（如昵称、头像、收获地址）以便您统一管理
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				
			};
		},
		methods:{
			getUserMsg(){
				this.isLogin = true
				uni.getUserProfile({
					desc:"获取用户基本信息",
					success:(res)=>{
						 const avatarUrl = res.userInfo.avatarUrl;
						 const nickName = res.userInfo.nickName;
						 const gender = res.userInfo.gender;
						 uni.setStorageSync("userInfo",{avatarUrl,nickName,gender})
						 //微信登录操作
						 uni.login({
							 success: async (res) => {
								 // 获取code码 res.code 之后传递给后端
							 	const result  = await this.$u.api.getWxLogin({code:res.code})
								// console.log(result.token);
								//将token本地存储
								uni.setStorage({
									key:"token",
									data:result.token,
									success: async() => {
										//更新用户信息 否则信息可能不对称
										await this.$u.api.postUpdateUser({
											avatarUrl,nickName,gender
										})
										//登录完成跳转到首页
										uni.reLaunch({
											url:"/pages/index/index"
										})
									}
								})
							 }
						 })
					},
					fail:(err)=>{
						console.log(err);
					},
					complete:()=>{
						// 恢复按钮
						this.isLogin=false
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap {
  font-size: 28rpx;
  .content {
    width: 600rpx;
    margin: 80rpx auto 0;
    .title {
      text-align: left;
      font-size: 60rpx;
      font-weight: 500;
      margin-bottom: 100rpx;
    }
  }
  .buttom {
    .loginType {
      display: flex;
      justify-content: center;
      padding: 100rpx;
      .loginBtn {
        background: transparent;
      }
      .loginBtn::after {
        border: none;
      }
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $u-content-color;
        font-size: 28rpx;
      }
    }
    .hint {
      padding: 20rpx 40rpx;
      font-size: 24rpx;
      color: $u-tips-color;
      .link {
        color: $u-type-warning;
      }
    }
  }
}
</style>
